<template>
  <div class="home-index">
    <div class="page-header">
      <div class="header-content">
        <div class="left-content">

          <div class="user-info">
            <div class="title"></div>
          </div>
        </div>
      </div>
      <div class="page-wrapper">
        <a-row>
          <a-col class="project-list-content" :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
            <a-card class="project-list" :loading="loading" style="margin-bottom: 24px;" :bordered="true"
              title="我的项目" :body-style="{ padding: 5 }">

            
              <a-list :grid="{ gutter: 24, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3 }" :data-source="myprojectdata" :pagination="pagination">
              <template #renderItem="{ item }">
              <a-list-item>
              <a-card :title="item.title" :body-style="{ padding: 0 }">  <!--后续加点击超链接到项目详情页-->
              <template #extra><StarOutlined /></template>
              <a-card-meta>
                <template v-slot:avatar><UserOutlined /></template>
                <template v-slot:title>
                    <div>{{ item.promanager }}</div>
                </template>
               
                <template v-slot:description>
                    <div>{{ item.description }}</div>
                    <div class="project-item-details">
                      <a-space>
                    <TeamOutlined />{{ item.team }}
                    <PictureOutlined />{{ item.pic }}
                    <BarsOutlined />{{ item.task }}
                    </a-space>
                    </div>

                </template>
                
              </a-card-meta>
              
              </a-card>
              </a-list-item>
               </template>
              </a-list>              
              <template #extra>
                <a href="#">更多项目</a>
              </template>
             
            </a-card>
            
          </a-col>
        </a-row>
        <a-row>
          <a-col class="work-list-content" :xl="24" :lg="24" :md="24" :sm="24">
            <a-card class="work-list" :loading="loading" style="margin-bottom: 24px;" :bordered="true" title="我的工作项"
              :body-style="{ padding: 0 }">
              <a-tabs v-model:activeKey="activeKey" >
                <a-tab-pane key="1" tab="我负责的">
                <a-list item-layout="horizontal" :data-source="mydata" :pagination="pagination">
                <template #renderItem="{ item }">
                  <a-list-item>
                    <template #actions>
                   <a key="list-loadmore-edit">点击完成</a>              
                  </template>
                    <a-list-item-meta>
                      <template #title>
                        <a href="#" @click="showDrawer">{{ item.title }}</a>
                      </template>
                      <template #description>
                        <div>
                        <!-- 工作内容： {{ item.content }}  -->
                        项目：{{ item.project }} 
                        时间：{{ item.time }}
                        </div>

                      </template>
                    </a-list-item-meta>
                  </a-list-item>
                 
                </template>
              </a-list>
            </a-tab-pane>
            <a-tab-pane key="2" tab="我协作的">
                <a-list item-layout="horizontal" :data-source="mydata" :pagination="pagination">
                <template #renderItem="{ item }">
                  <a-list-item>
                    <a-list-item-meta>
                      <template #title>
                        <a href="#">{{ item.title }}</a>
                      </template>
                      <template #description>
                        <div>
                        工作内容： {{ item.content }} 
                        项目：{{ item.project }} 
                        时间：{{ item.time }}
                        </div>

                      </template>
                    </a-list-item-meta>
                  </a-list-item>
                 
                </template>
              </a-list>
            </a-tab-pane>
            <a-tab-pane key="3" tab="我创建的" >
                <a-list item-layout="horizontal" :data-source="mydata" :pagination="pagination">
                <template #renderItem="{ item }">
                  <a-list-item>
                    <a-list-item-meta>
                      <template #title>
                        <a href="#">{{ item.title }}</a>
                      </template>
                      <template #description>
                        <div>
                        工作内容： {{ item.content }} 
                        项目：{{ item.project }} 
                        时间：{{ item.time }}
                        </div>

                      </template>
                    </a-list-item-meta>
                  </a-list-item>
                 
                </template>
              </a-list>
            </a-tab-pane>
            <a-tab-pane key="4" tab="所有">
                <a-list item-layout="horizontal" :data-source="mydata" :pagination="pagination">
                <template #renderItem="{ item }">
                  <a-list-item>
                    <a-list-item-meta >
                      <template #title>
                        <a href="#">{{ item.title }}</a>
                      </template>
                      <template #description>
                        <div>
                        <!-- 工作内容： {{ item.content }}  -->
                        项目：{{ item.project }} 
                        时间：{{ item.time }}
                        </div>

                      </template>
                    </a-list-item-meta>
                  </a-list-item>
                 
                </template>
              </a-list>
            </a-tab-pane>
            </a-tabs>
            </a-card>
          </a-col>


        </a-row>
        <a-row>
          <a-col class="flow-list-content" :xl="24" :lg="24" :md="24" :sm="24">
            
            <a-card class="work-list" :loading="loading" style="margin-bottom: 24px;" :bordered="true" title="我的流程"
              :body-style="{ padding: 0 }">
              <a-tabs v-model:activeKey="activeKey">
              <a-tab-pane key="1" tab="指派给我的">
                <a-list item-layout="horizontal" :data-source="myflowdata" :pagination="pagination">
                <template #renderItem="{ item }">
                  <a-list-item>
                    <template #actions>
                   <a key="list-loadmore-edit">审批</a>
                   <a key="list-loadmore-more" @click="showModal">详情</a>
                   <a-modal v-model:open="openModel" width="1000px"  @ok="handleOk">
                    <p>{{ item.title }}</p>
                        <p> 流程内容： {{ item.content }} </p>
                        <p> 流程节点：{{ item.flownode }} </p>
                        <p> 流程详细信息。 </p>
                      </a-modal>
                  </template>
                    <a-list-item-meta>
                      <template #title>
                        <a href="https://www.antdv.com/">{{ item.title }}</a>
                      </template>
                      <template #description>
                        <div>
                        <!-- 流程内容： {{ item.content }}  -->
                        流程节点：{{ item.flownode }} 
                        </div>
                        <div> 时间：{{ item.starttime }}</div>
                          <div>
                            发起人： {{ item.creator }} 
                            被指派者： {{ item.designee }} 
                          </div>
                      </template>
                    </a-list-item-meta>
                  </a-list-item>
                </template>
              </a-list>

              </a-tab-pane>
              <a-tab-pane key="2" tab="我创建的" force-render>
                <a-list item-layout="horizontal" :data-source="myflowdata" :pagination="pagination">
                <template #renderItem="{ item }">
                  <a-list-item>
                    <template #actions>
                   <a key="list-loadmore-edit">审批</a>
                   <a key="list-loadmore-more">详情</a>
                  </template>
                    <a-list-item-meta>
                      <template #title>
                        <a href="https://www.antdv.com/">{{ item.title }}</a>
                      </template>
                      <template #description>
                        <div>
                        流程内容： {{ item.content }} 
                        流程节点：{{ item.flownode }} 
                        
                        </div>
                        <div> 时间：{{ item.starttime }}</div>
                          <div>
                            发起人： {{ item.creator }} 
                            被指派者： {{ item.designee }} 
                          </div>
                      </template>
                    </a-list-item-meta>
                  </a-list-item>
                </template>
              </a-list>
              </a-tab-pane>
              <a-tab-pane key="3" tab="我参与的">
                <a-list item-layout="horizontal" :data-source="myflowdata" :pagination="pagination">
                <template #renderItem="{ item }">
                  <a-list-item>
                    <template #actions>
                   <a key="list-loadmore-edit" >审批</a>
                   <a key="list-loadmore-more" @click="showModal">详情</a>
                   <a-modal v-model:open="openModel" title="Basic Modal" @ok="handleOk">
                        <p>{{ item.title }}</p>
                        <p> 流程内容： {{ item.content }} </p>
                        <p> 流程节点：{{ item.flownode }} </p>
                      </a-modal>
                  </template>
                    <a-list-item-meta >
                      <template #title>
                        <a href="https://www.antdv.com/">{{ item.title }}</a>
                      </template>
                      <template #description>
                        <div>
                        流程内容： {{ item.content }} 
                        流程节点：{{ item.flownode }} 
                        </div>
                        <div> 时间：{{ item.starttime }}</div>
                          <div>
                            发起人： {{ item.creator }} 
                            被指派者： {{ item.designee }} 
                          </div>
                      </template>
                    </a-list-item-meta>
                  </a-list-item>
                </template>
              </a-list>
              </a-tab-pane>
  
              
            </a-tabs>
              <template #extra>
                <a href="#">更多流程</a>
              </template>
          
            </a-card>
          </a-col>
        </a-row>


        <a-row class="page-wrapper-content" :gutter="24" justify="center">
          <a-col class="mypage-list-content" style="padding: 0 12px;flex: 1" :xl="8" :lg="24" :md="24" :sm="24" :xs="24">
            <a-card title="我的主页" :bordered="false" style="margin-bottom: 24px">
              <template #cover> <a-image
              alt="example"
              src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"/>  
              我的主页我做主</template>
              <template #extra>
                <a href="#">投币</a>
              </template>
            </a-card>

          </a-col>
          <a-col class="schedule-list-content" style="padding: 0 24px;flex: 1" :xl="8" :lg="24" :md="24" :sm="24"
            :xs="24">
            <a-card title="我的日程" :bordered="false" style="margin-bottom: 24px；padding: 5px">       
                <a-timeline>
                  
                <a-timeline-item>企画方针</a-timeline-item>
                <a-timeline-item>专利检索.知识产权调查</a-timeline-item>
                <a-timeline-item>法规等的符合性确认</a-timeline-item>
                <a-timeline-item>出图</a-timeline-item>
                <a-timeline-item>作成技术标准书 </a-timeline-item>
                <a-timeline-item>认证取得 </a-timeline-item>
                <a-timeline-item>开发反省会</a-timeline-item>  
              </a-timeline>
              <template #extra>
                <a href="#">更多</a>
              </template>

            </a-card>
          </a-col>

          <a-col class="datetime-content" :xl="8" :lg="24" :md="24" :sm="24">
            <a-card title="日历" :bordered="false" style="margin-bottom: 24px">
              <div :style="{ width: '100%', border: '1px solid #d9d9d9', borderRadius: '4px' }">
                <a-calendar v-model:value="value" :fullscreen="false" @panelChange="onPanelChange">
                <template #dateCellRender="{ current }">
                <ul class="events">
                 <li v-for="item in getListData(current)" :key="item.key">
                <div class="image-container">
                <img :src="require(`@/icons/png/${item.type}.png`)">
        </div>
      </li>
    </ul>
      </template>
      </a-calendar>
              </div>
            </a-card>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
  <!--工作项抽屉-->
  <a-drawer width="1200" placement="right" :closable="false" :open="open" @close="onClose" >
    <div
    style="
       {
        padding: '20px';
      }
    "
  >
    <a-anchor
      direction="horizontal"
      :items="[
        {
          key: 'horizontally-part-1',
          href: '#horizontally-part-1',
          title: '保存',
        },
        {
          key: 'horizontally-part-2',
          href: '#horizontally-part-2',
          title: '进展反馈',
        },
        {
          key: 'horizontally-part-3',
          href: '#horizontally-part-3',
          title: '催办',
        },
        {
          key: 'horizontally-part-4',
          href: '#horizontally-part-4',
          title: '转办',
        },
        {
          key: 'horizontally-part-5',
          href: '#horizontally-part-5',
          title: '锁定',
        },
        {
          key: 'horizontally-part-6',
          href: '#horizontally-part-6',
          title: '完成任务',
        },
        {
          key: 'horizontally-part-7',
          href: '#horizontally-part-7',
          title: '暂停',
        },
        {
          key: 'horizontally-part-7',
          href: '#horizontally-part-7',
          title: '取消',
        },
      ]"
    />
  </div>
    <a-page-header title="法规等的符合性确认" sub-title="331-BD-台湾向30COST 特化" @back="onClose">
      <template #tags>
        <a-tag color="blue">Running</a-tag>
      </template>
      <template #extra>
        <a-button key="1" type="primary">点击完成</a-button>
      </template>
      <a-tabs v-model:activeKey="activeKey1">
        <a-tab-pane key="1" tab="详情">
          <a-row>
            <a-col :span="12">
          <a-descriptions title="工作详情">
          <a-descriptions-item label="负责人" span="3">
            冈本武藏
          </a-descriptions-item>
           <a-descriptions-item label="类型" span="3" >变更</a-descriptions-item>
            <a-descriptions-item label="项目" span="3">331-BD-台湾向30COST 特化</a-descriptions-item>
            <a-descriptions-item label="时间" span="3"> 
              <a-space direction="vertical" :size="18">
            <a-range-picker v-model:value="value1" show-time />
            </a-space>
      </a-descriptions-item>
            <a-descriptions-item label="描述" span="3">
              <a-textarea v-model:value="descvalue" placeholder="Basic usage" :rows="4" />
              <br />
            </a-descriptions-item>
          </a-descriptions>
        </a-col>
        
        <a-col :span="6">预期交付物：<br/>
          <a-space direction="vertical" align="center">
            <a-typography-text type="success">技术试作审查书 (已创建)</a-typography-text>
           
            <a-typography-text type="danger">技术试作审查书 (未创建)</a-typography-text>
            <a-typography-link href="https://antdv.com" target="_blank">
              技术试作审查书(点击查看)
           </a-typography-link>
          </a-space>
        </a-col>
        <a-col :span="6">流程步骤：
          <a-steps
    direction="vertical"
    :current="1"
    :items="[
      {
        title: 'Finished',
        description:'任务开始'
      },
      {
        title: 'In Progress',
        description:'进行中'
      },
      {
        title: 'Waiting',
        description:'等待中'
      },
    ]"
  ></a-steps>
        </a-col>
        </a-row>
        </a-tab-pane>
        <a-tab-pane key="2" tab="子工作项" force-render>  <a-empty /></a-tab-pane>
        <a-tab-pane key="3" tab="关联工作项">  <a-empty /></a-tab-pane>
        <a-tab-pane key="4" tab="关联文档">  <a-empty /></a-tab-pane>
        <a-tab-pane key="5" tab="附件">  <a-empty /></a-tab-pane>
     </a-tabs>
    </a-page-header>
   
      
    </a-drawer>
</template>

<script setup>
import { ref } from 'vue';
import {TeamOutlined,UserOutlined,StarOutlined,PictureOutlined,BarsOutlined} from '@ant-design/icons-vue'

//model
const openModel = ref(false);
const showModal = () => {
  openModel.value = true;
};
const handleOk = e => {
  console.log(e);
  openModel.value = false;
};


const activeKey = ref('1');
const activeKey1 =ref('1');
const value = ref();
const value1 = ref();
const descvalue = ref('这是描述');
const onPanelChange = (value, mode) => {
  console.log(value, mode);
};
//日历
const getListData = value => {
  let listData;
  switch (value.date()) {
    case 8:
      listData = [
        {
          type: 'red',
          key: '1',
        },
      ];
      break;
      case 13:
      listData = [
        {
          type: 'green',
          key: '2',
        },
      ];
      break;
  
    default:
  }
  return listData || [];
};



const pagination = {
  onChange: page => {
    console.log(page);
  },
  pageSize: 3,

};
const mydata = [
  {
    title: '法规等的符合性确认',
    content:'工作内容',
    project:'331-BD-台湾向30COST 特化',
    time:"2023-10-1"
  },
  {
    title: '作成技术标准书',
    content:'工作内容',
    project:'351-AP-欧洲nanoe发生器',
    time:"2023-10-1"
  },
  {
    title: '实施DR2',
    content:'工作内容',
    project:'这399-PARTS-松下新风开关型号切替',
    time:"2023-10-1"
  },
  {
    title: '量产试作',
    content:'工作内容',
    project:'351-AP-欧洲nanoe发生器',
    time:"2023-10-1"
  },
  {
    title: '技术试作审查',
    content:'工作内容',
    project:'351-AP-欧洲nanoe发生器',
    time:"2023-10-1"
  },
];
const myprojectdata = [
  {
    title: '346-AP-纳诺怡水离子发生器',
    promanager:'梁文武',
    description:"346-AP-纳诺怡水离子发生器",
    team:"1",
    pic:"2",
    task:"5"
  },
  {
    title: '351-AP-欧洲nanoe发生器',
    promanager:'梁秋倩',
    description:"351-AP-欧洲nanoe发生器",
    team:"3",
    pic:"4",
    task:"10"
  },
  {
    title: '331-BD-台湾向30COST 特化',
    promanager:'戴华章',
    description:"331-BD-台湾向30COST 特化",
    team:"3",
    pic:"45",
    task:"1"
  },
  {
    title: '399-PARTS-松下新风开关型号切替',
    promanager:'梁文武',
    description:"这399-PARTS-松下新风开关型号切替",
    team:"3",
    pic:"45",
    task:"1"
  },
  {
    title: '项目5',
    promanager:'经理5',
    description:"这是项目5",
    team:"5",
    pic:"4",
    task:"10"
  },
];
const myflowdata = [{
  title:'松下环境-项目任务确认流程',
  content:"流程内容1",
  creator:"张三",
  createtime:"2023-09-18 00:00",
  flownode:"设计",
  designee:"李四",
  starttime:"2023-09-19 00:00",
},{
  title:'松下环境-文档审批流程1',
  content:"流程内容2",
  creator:"张三",
  createtime:"2023-09-18 00:00",
  flownode:"校对",
  designee:"李四",
  starttime:"2023-09-19 00:00",
},
{
  title:'松下环境-文档审批流程2',
  content:"流程内容3",
  creator:"张三",
  createtime:"2023-09-18 00:00",
  flownode:"审批",
  designee:"李四",
  starttime:"2023-09-19 00:00",
},{
  title:'松下环境-文档审批流程3',
  content:"流程内容4",
  creator:"张三",
  createtime:"2023-09-18 00:00",
  flownode:"审批",
  designee:"李四",
  starttime:"2023-09-19 00:00",
},{
  title:'松下环境-文档审批流程4',
  content:"流程内容5",
  creator:"张三",
  createtime:"2023-09-18 00:00",
  flownode:"审批",
  designee:"李四",
  starttime:"2023-09-19 00:00",
}]

//抽屉
const open = ref(false);


const showDrawer = () => {
  console.log("抽屉");
  
  open.value = true;
};
const onClose = () => {
  open.value = false;
};



</script>

<style scoped lang="scss">
.page-wrapper {
  margin: 24px;

  .page-wrapper-content {
    display: flex;
  }

  .project-list {
    .project-card-grid {
      width: 33%;
      padding: 20px;
      cursor: pointer;
    }

    .ant-card-cover {
      height: 125px;

      img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
      }
    }


    .card-title {
      font-size: 0;

      a {
        color: rgba(0, 0, 0, 0.85);
        //margin-left: 12px;
        line-height: 24px;
        height: 24px;
        display: inline-block;
        vertical-align: top;
        font-size: 14px;

        &:hover {
          color: #1890ff;
        }
      }
    }

    .ant-card-meta-title {
      margin-bottom: 0px;
      margin-top: 8px;
    }

    .card-description {
      color: rgba(0, 0, 0, 0.45);
      height: 44px;
      line-height: 22px;
      overflow: hidden;

      .description-text {
        height: 22px;
      }
    }

    .project-item-details {
      display: flex;
    
      height: 18px;
      line-height: 20px;
      position: absolute;
      right: 0;
      bottom: 0;
    }
  }

  .ant-card-meta-description {
    color: rgba(0, 0, 0, 0.45);
    height: 44px;
    line-height: 22px;
    overflow: hidden;
  }

}
.image-container {
    position: relative;
    display: inline-block;
    transform: translate(0%, -70%);
  }

  .date-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: bold;
  }
</style>